<script setup lang="ts">
import { message } from 'ant-design-vue';
import { todoListType } from '@/types/list.type'
import { ref } from 'vue'
const newTodo = ref('')
const todoList = ref<todoListType[]>([]);
const completeList = ref<todoListType[]>([]);
function addTodo() {
  if (!newTodo.value) {
    message.warning('请输入');
    return;
  }
  todoList.value.push({
    id: Date.now(),
    label: newTodo.value,
  })
  newTodo.value = ''
}
function complete(item: todoListType) {
  const index = todoList.value.findIndex((el: any) => item.id === el.id)
  todoList.value.splice(index, 1)
  completeList.value.push(item)
}
function uncomplete(item: todoListType) {
  const index = completeList.value.findIndex((el: any) => item.id === el.id)
  completeList.value.splice(index, 1)
  todoList.value.push(item)
}
</script>
<template>
  <div>
    <a-input-search v-model:value="newTodo" placeholder="new todo" enter-button="Add" @search="addTodo" />
    <a-divider>TODO</a-divider>
    <a-list size="small" bordered :data-source="todoList">
      <template #renderItem="{ item }">
        <a-list-item @click="complete(item)">{{ item.label }}</a-list-item>
      </template>
    </a-list>
    <a-divider>已完成</a-divider>
    <a-list size="small" bordered :data-source="completeList">
      <template #renderItem="{ item }">
        <a-list-item @click="uncomplete(item)">{{ item.label }}</a-list-item>
      </template>
    </a-list>
  </div>
</template>

<style scoped></style>
